<template>
	<sb-loading-full ref='loadingRef'>
		<view v-if='info'>
			<sb-mine-btn @click.native="down" />
			<sb-back-icon @click.native='back' />
			<swiper :duration="1000" circular style="height: 100vh;width: 100vw;" @change="checkEnd">
				<swiper-item>
					<image mode="aspectFill" style="width: 100vw;height: 100vh;" :src="getImg(info)" />
				</swiper-item>
				<swiper-item v-for='p in picList' :key='p.id'>
					<image style="width: 100vw;height: 100vh;" :src="getImg(p)" />
				</swiper-item>
			</swiper>
			<view class="fixed flex flex-col a-c bold w100 c-w" style="top: 10%;letter-spacing: 2px;">
				<view style="font-size: 70rpx;">20:11</view>
				<view class="font30 marv20">2022-01-11</view>
			</view>

		</view>
	</sb-loading-full>
</template>
<script>
	import { HOME_PAGE_PATH } from '@/config/index.js'
	export default {
		data() {
			return {
				info: null,
				picList: [],
				qs: {
					page: 1,
					size: 20,
					type: 0
				}
			};
		},
		computed: {

		},
		onLoad({ id }) {
			this.id = id
		},
		onReady() {
			this.getDetail();
		},
		onShareAppMessage() {
			return {
				title: "送你一张壁纸",
				imageUrl: this.getImg(this.info)
			}
		},
		onShareTimeline() {
			return {
				title: "送你一张壁纸",
				imageUrl: this.getImg(this.info)
			}
		},
		methods: {
			back() {
				if (this.$prevPage()) {
					this.$back()
				} else {
					this.$go2(HOME_PAGE_PATH, true)
				}
			},
			down() {
				let url = this.$getStaticUrl(this.info?.path3 || p?.path2 || p?.path)
				uni.downloadFile({
					url,
					success: ({ tempFilePath }) => {
						uni.saveImageToPhotosAlbum({
							filePath: tempFilePath,
							success: () => {
								this.$msg("已保存到相册")
							}
						})
					}
				})
			},
			checkEnd({ detail: { current } }) {
				if (current === this.picList.length - 2) {
					this.qs.page++
					setTimeout(() => {
						this.getList()
					}, 900)
				}
			},
			getImg(p) {
				return this.$getStaticUrl(p?.path2 || p?.path3 || p?.path)
			},
			async getDetail() {
				try {
					this.$refs.loadingRef.show()
					let { success, data } = await this.$get("/pic/" + this.id, {}, false);
					if (success) {
						this.info = data
						this.qs.type = data.type
						await this.getList()
					}
				} finally {
					this.$refs.loadingRef.hide()
				}
			},
			async getList() {
				uni.showLoading({
					title: "正在加载下一部分"
				})
				let { success, data } = await this.$get("/pic", this.qs, false);
				if (success) {
					this.picList = this.picList.concat(data.rows)
				}
				uni.hideLoading()
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		/deep/ {
			.u-tabbar__content {
				position: absolute;
			}

			.u-sticky {
				background-color: #fff;
			}
		}
	}
</style>
